/*==================================================
                css for trainer page
====================================================*/

@media (min-width: 1200px) {
.column-left{
    position: relative;
    float: left;
    min-height: 1px;
    width:45%;
}
.column-right{
    position: relative;
    float: left;
    min-height: 1px;
    width:55%;
}
}

#trainer-profile{
    padding-top: 91px;
    @media(width:$mobile){
        padding-top:160px
    }
    @media(width:$mobile-max){
        padding-top:140px
    }
    @media(width:640){
        padding:115px;
    }
    .breadcrumb{
        margin-left:-10px;
    }
    .container{
        margin: 0 auto;
        padding:0;
        max-width:990px; 

    }
	h1{
		font-size: 59px;
		font-family: $lgr;
		color: $black;
        margin-left:-10px;
		margin: 0;
		padding: 0;
		line-height: 0.9;

      @media (min-width: $mobile) and (max-width: $mobile-max){
        /* Media Query Between Screen 320px and 480px  */
               font-size: 30px; 
               margin-top: 10px;
        } 

        @media (min-width: $mobile-max) and (max-width: $tablet){
            margin-top: 10px;
        /* Media Query Between Screen 480px and 768px  */    
        font-size: 40px;   
        } 
	}

		p{
			font-size: 12px;
			font-family: "Verdana";
			color: $dark_grey;
            margin-top: 3px;
		}
        img{
            width:100%;
        }

}

/*======================recomend-section=================*/

.recomends{
    width: 100%;
    float: left;
    h3{
         font-family: $lgr;
        font-size: 45px;
        color: $black;
        padding-top: 20px;
        text-transform: uppercase; 
        padding-bottom: 20px;
    }
    &>.recomend-sec{
        border: 2px solid $black;
        
        font-family: $lgr;
        font-size: 24px;
        color: $black;
        text-transform: uppercase;
        padding: 20px;
    }

   
}
.recomend-people{
    float: left;
    span{
        background-color: $yellow;
        height: 60px;
        width: 60px;
        border-radius: 30px;
        font-size: 30px;
        padding-top: 10px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
}
.recomend-rating{
    float: right;
    margin: 10px 0px;
    span{
        color: $dark_grey;
    }
}


   .icons li{
	    	float: left;
	    	
	    	&:nth-child(1) a {
                    	  
	    		background: url(../img/icons.png) no-repeat 0px 0px; width: 36px; height: 35px;
	    		display: block;
                margin-right: 14px;
				@include animate();
				
				&:hover{
					background: url(../img/icons.png) no-repeat 0 -54px; width: 36px; height: 35px;
					display: block;
				}
	    	
	    }


	    &:nth-child(2) a {
	    	
	    		background: url(../img/icons.png) no-repeat -46px 0; width: 36px; height: 35px;
	    		display: block;
                margin-right: 14px;
				@include animate();
				
				&:hover{
					background: url(../img/icons.png) no-repeat -46px -54px; width: 36px; height: 35px;
					display: block;
				}
	    	
	    }

	    &:nth-child(3) a {
	    	
				background: url(../img/icons.png) no-repeat -94px 0; width: 36px; height: 35px;	    		
	    		display: block;
                margin-right: 14px;
				@include animate();
				
				&:hover{
					background: url(../img/icons.png) no-repeat -94px -54px; width: 36px; height: 35px;
					display: block;
				}
	    	
	    }

	    &:nth-child(4) a{
	    	font-family: $verdana;
	    	font-weight: bold;
			text-transform: uppercase;
            font-size:10px;
	    	@include button();
                
                    padding:16px 13px;
                    margin-top: -9px;
            @media (max-width: $mobile) {
        
                margin-top:13px;
                margin-right: 131px; 
                padding:12px 6px;
        }
                
	    }

        &:nth-child(5) a{
            font-family: $verdana;
            font-weight: bold;
            text-transform: uppercase;
            font-size:10px;
            @include button();
                
                    padding:16px 13px;
                    margin-top: -9px;

             @media(max-width: $mobile-max){
                         margin-top:10x !important;
                        margin-right: 144px; 
                        padding:12px 6px;
                    }
            @media (max-width: $mobile){
        
               
                margin-right: 171px; 
                
        }
                
        }


	}

/*=======================trainer detail=======================*/

#trainer-detail{
	margin-top: 82px;
    margin-bottom: 70px;
    .container{
        margin: 0 auto;
        padding:0;
        max-width:990px; 
    }

    .nav-tabs{
    	border-bottom:none;

        @media (min-width: $mobile) and (max-width: $mobile-max){
        
            float:none;    
        }

    }
	
	.nav-tabs li 
    {
    	float: left; 
    	margin-right: 15px;
    	border: none;
        margin-bottom: 5px;
        @media (min-width: $mobile) and (max-width: $mobile-max){
       
              width: 100%;
                
        }
        

	a{
        border-radius: none;
		@include button($bgr:$black,$tcolor:$white,$hbgr:$yellow,$htcolor:$black);
		margin-top: 0px;
		border: none;
		padding: 11px 40px;
		font-weight:bold;
		text-transform: uppercase;
        
        text-align: center;
		&:hover{
			border:none;

		}
        
        @media (min-width: $mobile) and (max-width: $mobile-max){
        
           
           padding-top: 8px;
           padding-bottom: 8px;     
        }
@media (min-width: $tablet) and (max-width: $tablet-max){
        
        padding: 11px 22px;      
        }
	}
   }

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
         background-color:$yellow;
                 color: $black;
       }
.tab-content 

{
	margin-top: 10px;
    max-width: 510px;
    @media(max-width:767px)
    {
        max-width :100%;
    }
article{
	
	
	padding-right: 10px;
	color: $dark_grey;
	font-size: 13px;
	font-family: verdana;
	overflow-y: scroll;
	height: 300px;

}


}


/*======================review css===================*/
.profile-review{
    background-color: $light_grey;
    .container{
        padding:0 15px;
    }

    @media (min-width: $mobile) and (max-width: $mobile-max){
        /* Media Query Between Screen 320px and 480px  */
               margin-top: 20px;
                
        } 

        @media (min-width: $mobile-max) and (max-width: $tablet){
        /* Media Query Between Screen 480px and 768px  */       
         margin-top: 20px;
                

        }
        @media (min-width: $tablet) and (max-width: $tablet-max){
            margin-top: 20px;
                
        /* Media Query Between Screen 767px and 980px  */       
        }

    h4{
       font-family: $lgr;
        font-size: 45px;
        color: $black;
        padding-top: 0px;
        text-transform: uppercase;
        margin:10px 0 10px 0;

        @media (min-width: $mobile) and (max-width: $mobile-max){
        /* Media Query Between Screen 320px and 480px  */
               font-size: 30px;
                
        } 

        @media (min-width: $mobile-max) and (max-width: $tablet){
        /* Media Query Between Screen 480px and 768px  */       
        font-size: 35px;

        }
    }
    hr{
        margin-top: 0px;
        margin-bottom: 15px;
        border-top: 2px solid $dark_grey;
    }
}
.single-review{
    list-style-type: none;
    margin: 0 0 12px 0;
    overflow: hidden;
    position: relative;
   a{
    float: left;
    width: 100%;
   }
  img{
    float: left;
    width: 54px;
    height: 54px;
    margin-right: 7px;
    overflow: hidden;
}
}
.review-info{
    color: $dark_grey;
    font-family:$verdana;
    font-size: 13px;
    &>.name{
      font-weight: bold;
    }

}
 
}

/*====================people liked classes============================*/
.people-liked{
    background-color: $light_grey;
   .container{
         margin: 0 auto;
        padding:0;
        max-width:1030px; 
    }
         
.people-head{
        font-family: $lgr;
        font-size: 45px;
        color: $black;
        padding-top: 20px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        text-transform: uppercase;
            a{
               @include button($black,$white,$yellow,$black);  
               float: right;
            display: inline-block;
            margin-top: 25px;
            font-family: $verdana;
            font-size: 10px;
            text-transform: none;
            padding: 3px 3px;
            font-weight: bold;
            }

            @media(max-width: $mobile-max){
        /* Media Query Between Screen 320px and 480px  */
                font-size: 30px;
        }
 }           
.single-people{
    margin-left: 20px;
    position: relative;
    margin-right: -13px;
    .title-span{
      position: relative;
      max-width: 90%; 
    img{
    border: 10px solid $white;
    min-width: 100%;
     }
     span{
            position: absolute;
            top:0;
            background-color: rgba(230, 230, 230, 0.7);
        font-family: $lgr;
        font-size: 45px;
        color: $black;
        text-transform: uppercase;
        width: 100%;
        margin-top: 90px;
        padding: 3px 24px;
        small{
            font-family: $verdana;
            font-size: 10px;
            display: block;
        }
            @media(max-width: 480px){
        
             font-size: 26px;
             margin-top: 0;
             top:42px;   
        }
       }
     }
}

}


/*=======previous class css================*/
.previous-classes{
    background-color: $black;
   .container{
         margin: 0 auto;
        padding:0;
        max-width:1030px; 
    }
         
.previous-head{
        font-family: $lgr;
        font-size: 45px;
        color: $white;
        padding-top: 20px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        text-transform: uppercase;
        span{
            color:$yellow;

        }
            a{
               @include button($yellow,$black,$yellow,$white);  
               float: right;
            display: inline-block;
            margin-top: 25px;
            font-family: $verdana;
            font-size: 10px;
            text-transform: none;
            padding: 3px 3px;
            font-weight: bold;
            }

            @media(max-width: $mobile-max){
        /* Media Query Between Screen 320px and 480px  */
        font-size: 30px;
                
        }
 }           
.prev-class{
    padding-left: 20px;
    position: relative;
    margin-right: -13px;
    .title-span{
      position: relative;
      max-width: 90%; 
    img{
    border: 10px solid $white;
    min-width:100%;
     }
     span{
            position: absolute;
            top:0;
            background-color: rgba(230, 230, 230, 0.7);
        font-family: $lgr;
        font-size: 45px;
        color: $black;
        text-transform: uppercase;
        width: 100%;
        margin-top: 90px;
        padding: 3px 24px;
        small{
            font-family: $verdana;
            font-size: 10px;
            display: block;
        }
        @media(max-width: 480px){
        
             font-size: 26px;
             margin-top: 0;
             top:42px;   
        }
        
       }  
     }
}

}
/*====================running class css================*/
.running-classes{
    background-color: $light_grey;

    .container{
         margin: 0 auto;
        padding:0;
        max-width:1030px; 
    }
   
         
.running-head{
        font-family: $lgr;
        font-size: 45px;
        color: $black;
        padding-top: 20px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        text-transform: uppercase;
            a{
               @include button($black,$white,$yellow,$black);  
               float: right;
            display: inline-block;
            margin-top: 25px;
            font-family: $verdana;
            font-size: 10px;
            text-transform: none;
            padding: 3px 3px;
            font-weight: bold;
            }

            @media(max-width: $mobile-max){
        /* Media Query Between Screen 320px and 480px  */
                font-size: 30px;
        }
 }           
.current-class{
    padding-left: 20px;
    margin-right: -13px;
    .title-span{
      position: relative;
      max-width: 90%;  
    img{
    border: 10px solid $white;
    min-width: 100%;
     }
     span{
            position: absolute;
            top:0;
            background-color: rgba(230, 230, 230, 0.7);
        font-family: $lgr;
        font-size: 45px;
        color: $black;
        text-transform: uppercase;
        width: 100%;
        margin-top: 90px;
        padding: 3px 24px;
        small{
            font-family: $verdana;
            font-size: 10px;
            display: block;
        }
          @media(max-width: 480px){
        
             font-size: 26px;
             margin-top: 0;
             top:42px;   
        }

     }
 }
}

}


